<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom节点操作</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            //第一种方法 在已有的内容基础上追加内容
            // var box=$('<div id="box"></div>');
            // $('body').append(box);// 向已有的内容后面添加

                //第二种方法 在已有的内容基础上追加内容
            // var strong=$('<strong>新的内容</strong>');
            // $('div').append(strong);//append追加

            //第三种方法 在已有的内容基础上追加内容
            // $('div').append(function (index,html) {
            //     return '<strong>0288新政策</strong>'+html;
            // });


            //已经有元素 添加到另一个元素内容的后面面
            // $('strong').appendTo('div');

           // 把p标签添加到div中已有内容的前面
           //  $('div').prepend('<p>我是p标签</p>');
            // $('div').prepend(function (index,html) {
            //     return '<p>我是p标签</p>'+html ;
            // });
            // $('strong').prependTo('div');//已有的元素想添加到另一个元素的内容前面


            // $('h1').after('<a>点我有惊喜</a>');//表示在h1后面添加a元素
            // $('h1').after(function (index,html) {
            //     return '<a>点我有惊喜</a>';//表示在h1后面添加a元素
            // });
            // $('h1').before('<a>点我有惊喜</a>');//表示在h1前面添加a元素
            // $('h1').before(function (index,html) {
            //     return '<a>点我有惊喜</a>'
            // });
            // $('strong').insertAfter('div');//已有的元素想添加到另一个元素后面 把strong添加到div后面去
            $('div').insertBefore('strong');//已有的元素想添加到另一个元素前面 把div添加到strong后面去

        });
    </script>
</head>
<body>
<script>
    /*应用jquery创建节点
    三种方法:
            1.var box=$('<div id="box"></div>');
                $('body').append(box);// 向已有的内容后面添加
           2. var strong=$('<strong>新的内容</strong>');
                $('div').append(strong);//append追加
          3.$('div').append(function (index,html) {
                return '<strong>0288新政策</strong>'+html;
            });

    *应用jquery插入节点
    1.已经有元素 添加到另一个元素内容的后面   $('strong').appendTo('div');
    2.把p标签添加到div中已有内容的前面  两种方法 1.$('div').prepend('<p>我是p标签</p>');
                                            2.$('div').prepend(function (index,html) {
                                               return '<p>我是p标签</p>'+html ;
                                             });
    3.已经有元素 添加到另一个元素内容的前面    $('strong').prependTo('div')
    4.在同级的元素后面添加元素  （添加兄弟节点）
               两种方法:1. $('h1').after('<a>点我有惊喜</a>')
                       2.$('h1').after(function (index,html) {
                            return '<a>点我有惊喜</a>';//表示在h1后面添加a元素
                            });
    5.在同级的元素前面添加元素
            两种方法:1.$('h1').before('<a>点我有惊喜</a>')
                    2.$('h1').before(function (index,html) {
                        return '<a>点我有惊喜</a>'
                       });
   6.已有的元素想添加到一个元素的后面（兄弟节点）
            $('strong').insertAfter('div');
   7.已有的元素想添加到一个元素的后面（兄弟节点）
            $('div').insertBefore('strong');
    *应用jquery包裹节点
    * */
</script>
    <strong>0289冀</strong>
    <div>CSS操作</div>
   <h1>今天天气晴天</h1>
</body>
</html>